<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
<body>
<ui:composition template="../templates/template.xhtml">
	 	<ui:define name="content">
	 	<script type="text/javascript">
	 	$(function() {
		 	$("#bntPergunta").hide();
	 		$("#dice").dice();
	 		$("#dice, #btn_randRoll").click(function() {
	 			$("#dice").dice("roll", girarDado);
	 		});

	 		$("#btn_setSize").click(function() {
	 			$("#dice").dice("option", {
	 				diceSize : parseInt($("#dur").val())
	 			});
	 		});

	 		$("#btn_setDuration").click(function() {
	 			$("#dice").dice("option", {
	 				duration : 500
	 			});
	 		});
	 	});

	 	function girarDado(valor) {
	 		$("#numeroSorteado").val(valor);
	 		$("#numeroSorteadoCabecalho").text(valor);
	 		setTimeout(function(){$("#dice").hide('slow');},240 );

	 		$("#bntPergunta").show();
	 	}
	 				
		</script>
	 	<div class="content">
		 	<div class="row">
				<div class="col-md-12">
					<div class="tela">
						<h:form id="idForm" prependId="false"  >
							<h:messages id="messages" styleClass="text-info bg-info :focus" />
							<a4j:outputPanel style="display:none" id="camposHidden">
								<h:inputHidden id="peaoId" value="#{gameController.view.peaoEmJogo.descricao}"/>
								<h:inputHidden id="jogadorNome" value="#{gameController.view.jogadorAtual.nome}"/>
								<h:inputHidden id="peaoPodeAndar" value="#{gameController.view.peaoEmJogo.podeAndar}" />
								<h:inputHidden id="peaoPosicaoAtual" value="#{gameController.view.peaoEmJogo.posicaoAtual}" />
								<h:inputHidden id="peaoProximaPosicao" value="#{gameController.view.peaoEmJogo.proximaPosicao}" />
								<h:inputHidden id="numeroSorteado" value="#{gameController.view.numeroSorteado}" />
							</a4j:outputPanel>
							<div id="divTabuleiro">
								<div>
										<img id="peao1" src="/tcc/resources/img/peao-preto.png"	alt="botão1" /> 
										<img id="peao2" src="/tcc/resources/img/peao-azul.png" alt="botão2" />
										<img id="peao3" src="/tcc/resources/img/peao-rosa.png" alt="botão3" />
										<img id="peao4" src="/tcc/resources/img/peao-verde.png" alt="botão4" />
										<img id="peao5" src="/tcc/resources/img/peao-amarelo.png" alt="botão5" />
									</div>
								<table id="idTabuleiro" border="1px;" class="tabela">
									<tr>
										<td id="casa40" class="casaInativa td-tabuleiro">Start<br/>Finish</td>
										<td id="casa1" class="casaInativa td-tabuleiro">1</td>
										<td id="casa2" class="casaInativa td-tabuleiro">2</td>
										<td id="casa3" class="casaInativa td-tabuleiro">3</td>
										<td id="casa4" class="casaInativa td-tabuleiro">4</td>
										<td id="casa5" class="casaInativa td-tabuleiro">5</td>
										<td id="casa6" class="casaEspecial td-tabuleiro">6</td>
										<td id="casa7" class="casaInativa td-tabuleiro">7</td>
										<td id="casa8" class="casaInativa td-tabuleiro">8</td>
										<td id="casa9" class="casaInativa td-tabuleiro">9</td>
										<td id="casa10" class="casaInativa td-tabuleiro">10</td>
										<td id="casa11" class="casaInativa td-tabuleiro">11</td>
										<td id="casa12" class="casaEspecial td-tabuleiro">12</td>
										<td id="casa13" class="casaInativa td-tabuleiro">13</td>
										<td id="casa14" class="casaInativa td-tabuleiro">14</td>
									</tr>
									<tr>
										<td id="casa39" class="casaInativa td-tabuleiro">39</td>
										<td id="centro" class="centro" rowspan="5" colspan="13">
											<a4j:outputPanel id="painelPergunta">
												<rich:panel style="border:0px" rendered="#{gameController.mostraPergunta}" styleClass="pergunta">
													<h:inputHidden value="#{gameController.view.pergunta.id}" />
													<h:outputLabel styleClass="pergunta" id="pergunta"  value="#{gameController.view.pergunta.descricao}"/>
													<hr />
													<h:selectOneRadio layout="pageDirection" required="true" requiredMessage="Responda a pergunta" styleClass="resposta" value="#{gameController.view.repostaEscolhida}">
														<f:selectItems  value="#{gameController.view.pergunta.respostas}" var="resposta" itemLabel="#{resposta.descricao}" itemValue="#{resposta.id}"/>
														<br/>
													</h:selectOneRadio>			
													
													<a4j:commandLink oncomplete="moverPeca();" execute="@form" styleClass="btn btn-default" style="margin-left:50%;" value="Responder" action="#{gameController.responder()}" render="painelPergunta camposHidden  messages idNome"/>
												</rich:panel>
												<rich:panel style="border:0px" rendered="#{gameController.mostrarPrenda}" styleClass="prenda">
													<h2><h:outputText value="Atenção!  #{gameController.view.peaoEmJogo.jogador.nome}" /></h2>
													<h3><h:outputText value="#{gameController.view.prenda.descricao}" /></h3>
												</rich:panel>	 
											</a4j:outputPanel>
											<div id="dice" align="center" style="width:150px; height:150px; z-index: 2; margin:auto;"></div>
											<a4j:commandLink onbegin="contagemRegressiva();" oncomplete="$('#bntPergunta').hide()" execute="@all" id="bntPergunta"  value="Pergunta" actionListener="#{gameController.buscarPergunta()}" render="painelPergunta camposHidden messages idNome" styleClass="btn btn-primary"/>					
										</td>
										<td id="casa15" class="casaInativa td-tabuleiro">15</td>
									</tr>
									<tr>
										<td id="casa38" class="casaInativa td-tabuleiro">38</td>
										<td id="casa16" class="casaInativa td-tabuleiro">16</td>
									</tr>
									<tr>
										<td id="casa37" class="casaInativa td-tabuleiro">37</td>
										<td id="casa17" class="casaInativa td-tabuleiro">17</td>
									</tr>
									<tr>
										<td id="casa36" class="casaEspecial td-tabuleiro">36</td>
										<td id="casa18" class="casaEspecial td-tabuleiro">18</td>
									</tr>
									<tr>
										<td id="casa35" class="casaInativa td-tabuleiro">35</td>
										<td id="casa19" class="casaInativa td-tabuleiro">19</td>
									</tr>
					
									<tr>
										<td id="casa34" class="casaInativa td-tabuleiro">34</td>
										<td id="casa33" class="casaInativa td-tabuleiro">33</td>
										<td id="casa32" class="casaInativa td-tabuleiro">32</td>
										<td id="casa31" class="casaInativa td-tabuleiro">31</td>
										<td id="casa30" class="casaEspecial td-tabuleiro">30</td>
										<td id="casa29" class="casaInativa td-tabuleiro">29</td>
										<td id="casa28" class="casaInativa td-tabuleiro">28</td>
										<td id="casa27" class="casaInativa td-tabuleiro">27</td>
										<td id="casa26" class="casaInativa td-tabuleiro">26</td>
										<td id="casa25" class="casaInativa td-tabuleiro">25</td>
										<td id="casa24" class="casaEspecial td-tabuleiro">24</td>
										<td id="casa23" class="casaInativa td-tabuleiro">23</td>
										<td id="casa22" class="casaInativa td-tabuleiro">22</td>
										<td id="casa21" class="casaInativa td-tabuleiro">21</td>
										<td id="casa20" class="casaInativa td-tabuleiro">20</td>
									</tr>
								</table>
							</div>
							<br />
						</h:form>
					</div>
				</div>
			</div>
		</div>
			
		</ui:define>
	</ui:composition>
</body>
</html>
